<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('配置接口实现自动请求数据并渲染树节点')}`">{{ $t('配置接口实现自动请求数据并渲染树节点') }}</t>
            <li>
                传入<span class="d-code">requestConfig</span>接口请求的配置对象，即可实现自动发起请求获取树数据并渲染树节点
            </li>
        </template>
        <div style="width: 300px;">
            <sib-item v-model="value" :props="props"></sib-item>
        </div>
        <p style="color: #666;">当前选择的是：{{ value && value.length ? value : '--' }}</p>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'tree',
            data: [],
            filterable: true,
            showCheckbox: true,
            requestConfig: {
                url: '/api/tree-data.json',
                method: 'get',
                params: {},
            },
        });

        return {
            props,
            value,
            templateString: `<template>
    <sib-item v-model="value" :props="props"></sib-item>
    <p>当前选择的是：{{ value && value.length ? value : '--' }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'tree',
            data: [],
            filterable: true,
            showCheckbox: true,
            requestConfig: {
                url: '/api/tree-data.json',
                method: 'get',
                params: {},
            },
        });

        return { value, props };
    },
};
<\/script>`,
        };
    },
};
</script>
